<template>
  <section>
    <el-form  label-width="100px">
      <el-form-item v-for="val in item.data.vals" :key="val.code" :label="val.title">
        <div v-if="val.code === 'principleOfHealth'">
          <el-input v-model="val.val" size="mini"></el-input>
          <el-input v-model="val.detail" size="mini"></el-input>
        </div>
        <div v-else>
          <el-tabs :value="selTab" addable @edit="handleTabsEdit" type="border-card">
            <el-tab-pane :key="index" v-for="(precaution, index) in val.val" :name="precaution.code">
              <span slot="label" style="margin-left: 8px">
                <span v-if="precaution.name !== ''">
                  <span :span="12">{{precaution.name}}</span>
                  <span :span="10">
                    <i class="el-icon-edit" v-if="!precaution.edit" @click="precaution.edit = true"></i>
                    <i class="el-icon-close" v-if="!precaution.edit" @click="delItem(precautions,index)" style="color: red"></i>
                    <i class="el-icon-loading" v-if="showLoading"></i>
                  </span>
                </span>
                <span  v-if="precaution.edit" >
                  <el-input size="mini" v-model="precaution.name" @keydown.native.prevent.enter="editItemName(precaution)" placeholder="分类名" style="width: 80px"/>
                  <el-input size="mini" v-model="precaution.code" @keydown.native.prevent.enter="editItemName(precaution)" placeholder="编码名" style="width: 80px"/>
                  <i class="el-icon-check" v-if="precaution.edit"  @click="editItemName(precaution)"></i>
                </span>
              </span>
              <el-row style="display: flex;flex-direction: row">
                <el-col :span="6">
                  <el-input size="mini" v-model="newTitle"  @keydown.native.prevent.enter="addNew(precaution,newTitle)" placeholder="请输入标题"></el-input>
                </el-col>
                <el-col :span="6" style="margin-left: 10px">
                  <el-button size="mini" @click="addNew(precaution,newTitle)">添加</el-button>
                </el-col>
              </el-row>
              <el-main style="max-height:500px">
                <el-table :data="precaution.detail" >
                  <el-table-column label="序号" type="index"></el-table-column>
                  <el-table-column label="标题" prop="title" width="100px">
                    <template slot-scope="scope">
                      <el-input size="mini" v-model="scope.row.title" v-if="scope.row.edit"></el-input>
                      <span v-if="!scope.row.edit">{{scope.row.title}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注">
                    <template slot-scope="scope">
                      <el-input v-if="scope.row.edit" v-model="scope.row.ps" size="mini"></el-input>
                      <span v-if="!scope.row.edit">{{scope.row.ps}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="内容" width="100px">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="setDetail(scope.row)" :disabled="!scope.row.edit">设置</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="180" fixed="right">
                    <template slot-scope="scope">
                      <el-button @click='scope.row.edit = !scope.row.edit' size="mini" :type="scope.row.edit=== true?'success':'primary'">{{scope.row.edit=== true?'完成':'编辑'}}</el-button>
                      <el-button @click='del(scope)' size="mini" v-if="!scope.row.edit" type="danger">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table></el-main>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
    </el-form>
    <el-row>
      <div>
        <el-button size="mini" type="primary" @click="savePage(item)"  v-if="item.state === 0">测试·保存</el-button>
        <el-button type="danger" size="mini" @click="delPage">删除</el-button>
        <el-button type="success" size="mini" @click="finishePage" style="float: right;margin-right: 0px"  v-if="item.state === 0">完成</el-button>
      </div>
      <div v-if="item.state === 1">
          <span style="color: red;font-weight: bold">
          报告项已创建完毕
          </span>
      </div>
    </el-row>
    <el-row  v-if="currRows.length>0">
      <el-dialog :title="currRows[0].title" :visible.sync="currRows[0].showDialog" v-if="currRows.length>0"
                 :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
        <selDetail :currRows="currRows"></selDetail>
      </el-dialog>
    </el-row>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import selDetail from './selectDetail'
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "No10",
    props: ['currReport', 'item'],
    components: {selDetail},
    data() {
      return {
        makeTab:'',
        currRows:[],
        allArray:null,
        showDetailDialog:false,
        newTitle:null,
        precautions:[],
        showLoading:false,
        selTab:null
      }
    },
    created() {
      console.log(this.item)
      if(this.item.data.vals){
        this.item.data.vals.forEach(v=>{
          if(v.code === 'precautions' && v.val.length>0) {
            console.log(v)
            this.selTab = v.val[0].code
          }
        })
      }else {
        Vue.set(this.item.data,'vals',this.item.reportModule.metadata.detail)
        this.item.data.vals.forEach(v=>{
          if(v.code === 'precautions') Vue.set(v,'val',[])
        })
      }
    },
    mounted() {
    },
    computed: {
    },
    watch: {},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      savePage(){
        this.$emit('save')
      },
      delPage(){
        this.$emit('del')
      },
      finishePage(){
        this.$emit('finish')
      },
      handleTabsEdit(a,b){
        console.log(a,b)
        if(b==='add'){//增加一个
          console.log(this.item.data.vals)
          let tmp=this.item.data.vals.find(v=>v.code === "precautions")
          tmp.val.push({name:'',code:'',detail:[],edit:true})
        }
      },
      delItem(p,i){
        p.splice(i,1)
        this.makeTab=p[p.length-1].code
      },
      editItemName(item){
        if(item.name === '' || item.code === ''){
          this.$message({type:'warning',message:'分类或编码不得为空'})
          return
        }
        this.makeTab=item.code
        item.edit = false
      },
      addNew(p,t){
        let tmp={title:t,sel:[],ps:'',edit:true,detail:[]}
        p.detail.push(tmp)
        this.newTitle=null
      },
      setDetail(row){//添加内容
        Vue.set(row,'showDialog',true)
        this.currRows.push(row)
      },
    }
  }
</script>

<style scoped>

</style>
